<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/static/css/index.css}">
    <link rel="stylesheet" th:href="@{/static/css/login.css}">

</head>

<body>
<div id="page-content" >
    <el-card class="box-card" style="width:400px">
        <div slot="header" class="clearfix">
            <span>商铺管理员登录</span>
        </div>
        <el-form :model="admin"  label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="admin.username"placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" placeholder="请输入密码">
                <el-input type="password" v-model="admin.password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('admin')" style="width: 100%">登录</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
<script src="../../static/js/vue.js" th:src="@{/static/js/vue.js}"></script>
<script src="../../static/js/element.js" th:src="@{/static/js/element.js}"></script>
<script src="../../static/js/config.js" th:src="@{/static/js/config.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>
<script>

    var vue =new Vue({
        el: '#page-content',
        data:{
            tableData: '',
            web_static_server:_global_web_server+"/static/",
            admin:{
                username:'',
                password:'',
            }

        },
        methods:{
            init:function () {
                var url=_global_web_server +"/product/list";
                var _self=this;
                axios.get(url,{
                    params:{
                        pageNum:_self.pageNum,
                        pageSize:_self.pageSize
                    }
                }).then(function (response) {
                    var  jsonResult=response.data;
                    var  pageInfo =jsonResult.data;
                    _self.tableData=pageInfo.list;
                    _self.total=pageInfo.total;

                }).catch(function (reason) {
                    console.log(reason);
                });
            },
            handleCurrentChange:function (value) {
                this.pageNum=value;
                this.init();

            },
            submitForm:function () {
                var url=_global_web_server +"/admin/login";
                var _self=this;
                axios.defaults.withCredentials=true;
                axios.get(url,{
                    params:{
                        username:_self.admin.username,
                        password:_self.admin.password
                    }
                }).then(function (response) {
                    var  jsonResult=response.data;
                    if (jsonResult.status ==200){
                        window.location.href=_global_web_server+"/view/home"
                    }else {
                        _self.$alert(jsonResult.message,"提示")

                    }

                }).catch(function (reason) {
                    console.log(reason);
                });
            }
        }
    });
    //vue.init();


</script>

</body>

</html>